<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/Start.js"></script>
  <link rel="stylesheet" href="css/Start.css">
  <title>星空背景</title>
</head>
<body>
<div>
  <canvas id="starBg"></canvas>

</div>
<script type="text/javascript">
  let stars = []; // 定义星星数组
  const maxStars = 1100; // 最大星星数量

  // 初始化画布
  function initCanvas() {
    const canvas = document.getElementById("starBg"); // 获取到画布元素
    const ctx = canvas.getContext("2d"); // 获取你想要的画布上的绘制类型
    const w = (canvas.width = window.innerWidth); // 获取窗口宽度
    const h = (canvas.height = window.innerHeight); // 获取窗口高度

    const canvas2 = document.createElement("canvas"); // 创建一个canvas元素
    const ctx2 = canvas2.getContext("2d"); // 类型
    canvas2.width = 100;
    canvas2.height = 100;
    const half = canvas2.width / 2; // 取一半的宽度
    const gradient2 = ctx2.createRadialGradient(half, half, 0,
            half, half, half);
    // MDN官方文档 : 1：开始圆形的 x 轴坐标。 2：开始圆形的 y 轴坐标。 3：开始圆形的半径。
    // 4： 结束圆形的 x 轴坐标。 5：结束圆形的 y 轴坐标。 6：结束圆形的半径。
    gradient2.addColorStop(0.025, "#CCC");
    // 两个参数分别是 offset color
    // offset 0-1之间 超出范围将抛出INDEX_SIZE_ERR错误 颜色值不能解析为有效的CSS颜色值 将抛出SYNTAX_ERR错误。
    // CanvasGradient.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。
    gradient2.addColorStop(0.1, "hsl(217, 61%, 33%)");
    // CSS hsl
    // hsla(hue, saturation, lightness) 色相（hue） 饱和度（saturation） 亮度（lightness）
    gradient2.addColorStop(0.25, "hsl(217, 64%, 6%)");
    gradient2.addColorStop(1, "transparent");
    // 整个圆旋转一周 不同位置处颜色的改变 让星星变得有意思起来

    ctx2.fillStyle = gradient2;
    // fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式
    ctx2.beginPath();
    // beginPath() 方法开始一条路径，或重置当前的路径。
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    // ctx2.arc(half, half, half, 0, Math.PI * 2);
    // 拿到 原点 x y 参数 ，半径为 一半 ，从0到2pi 默认顺时针话 true为逆时针绘制圆弧
    ctx2.fill();
    // 填充 非零环绕规则
    // ctx2.closePath();

    for (var i = 1; i < maxStars; i++) {
      const star = new Star({w, h}, ctx, canvas2);
      stars[i] = star;
      // 每个数组里面都含有星星
    }
    function animation() {
      ctx.globalCompositeOperation = "source-over";
      ctx.globalAlpha = 0.8; //尾巴
      ctx.fillStyle = "hsla(217, 64%, 6%, 2)";
      ctx.fillRect(0, 0, w, h);

      ctx.globalCompositeOperation = "lighter";
      // 是否高亮 通过两个重叠的颜色值进行高亮显示
      for (let i = 1; i < stars.length; i++) {
        stars[i].draw();
      }

      window.requestAnimationFrame(animation);
      // 下一次重绘之前更新动画所调用的函数
    }
    animation();
  }
  initCanvas();
</script>

</body>
</html>